<template>
	<div>
	  <div class="mp-header mpf-border-bottom">
		<router-link to="/" tag="a" style="line-height:44px;padding:0 6px;">
			<div class="iconfont header-back">&#xe64e;</div>
		</router-link>
	   <h1 class="mp-header-title" style="width:75%;">
	   		<input  autocomplete="off" placeholder="输入城市或景点" class="mp-search-input" style="height:100%;" />
		</h1>
	   <span class="mp-header-right">
	   <a class="mp-search-submit" style="color:#333;padding-right:6px;">搜索</a></span>
	  </div>

      <div class="mp-filter mpf-border-bottom">
       <div class="mp-select" @click="isShowmenu">
        <span class="mp-iconfont">全部分类</span>
        <span class="iconfont" v-show="!isShow">&#xe626;</span>
        <span class="iconfont" v-show="isShow">&#xe61d;</span>
       </div>
       <div class="mp-select" @click="isShowmenusc">
        <span class="mp-iconfont">推荐排序</span>
        <span class="iconfont" v-show="!isShowsc">&#xe626;</span>
        <span class="iconfont" v-show="isShowsc">&#xe61d;</span>
       </div>
      </div>

	<div class="mp-menu" style="overflow: hidden; top: 84px; left: 0px; display: block;" v-show="isShowsc">
	   <div class="mp-menu-inner" style="transition-property: transform; transform-origin: 0px 0px 0px; transform: translate(0px, 0px) translateZ(0px);">
		    <div class="mp-menu-item mpf-border-bottom"
		     @click="activeshow(0)" :class="{mpmenuitemactive:index === 0}" :index="0">
		     推荐排序
		    </div>
		    <div class="mp-menu-item mpf-border-bottom"
		     @click="activeshow(1)" :class="{mpmenuitemactive:index === 1}" :index="1">
		     离我最近
		    </div>
		    <div class="mp-menu-item mpf-border-bottom"
		     @click="activeshow(2)" :class="{mpmenuitemactive:index === 2}" :index="2">
		     人气最高
		    </div>
	   	</div>
	  </div>

	  <div class="mp-menu mp-menu-half mp-menu-left" style="overflow: hidden; top: 84px; display: block;" v-show="isShow">
	   <div class="mp-menu-inner" style="transition-property: transform; transform-origin: 0px 0px 0px; transform: translate(0px, 0px) translateZ(0px);">
	    <div class="mp-menu-item mpf-border-bottom" @click="activeshow(0)" :class="{mpmenuitemactive:index === 0}" :index="0">
	     <img class="mp-menu-item-icon" src="https://img1.qunarzz.com/piao/fusion/1509/9d/0ee9e4808773f.png" />全部分类
	     <span class="mp-munu-item-num">{{list.length}}</span>
	    </div>
	    <div class="mp-menu-item mpf-border-bottom " :class="{mpmenuitemactive:index === 1}" @click="activeshow(1)" :index="1">
	     <img class="mp-menu-item-icon" src="https://imgs.qunarzz.com/piao/fusion/1608/f8/799d67d22404c602.png" />自然风光
	     <span class="mp-munu-item-num">{{ntsum}}</span>
	    </div>
	    <div class="mp-menu-item mpf-border-bottom" @click="activeshow(2)" :class="{mpmenuitemactive:index === 2}" :index="2">
	     <img class="mp-menu-item-icon" src="https://imgs.qunarzz.com/piao/fusion/1608/3e/d07407699d56c202.png" />游乐场
	     <span class="mp-munu-item-num">{{amsum}}</span>
	    </div>
	    <div class="mp-menu-item mpf-border-bottom" @click="activeshow(3)" :class="{mpmenuitemactive:index === 3}" :index="3">
	     <img class="mp-menu-item-icon" src="https://imgs.qunarzz.com/piao/fusion/1608/a5/9254bfcb77931f02.png" />农家度假
	     <span class="mp-munu-item-num">{{fmsum}}</span>
	    </div>
	    <div class="mp-menu-item mpf-border-bottom" @click="activeshow(4)" :class="{mpmenuitemactive:index === 4}" :index="4">
	     <img class="mp-menu-item-icon" src="https://imgs.qunarzz.com/piao/fusion/1608/88/081697df39c9f802.png" />水上玩乐
	     <span class="mp-munu-item-num">{{ossum}}</span>
	    </div>

	   </div>
	   </router-view>
	   <div style="position: absolute; z-index: 100; width: 7px; bottom: 2px; top: 2px; right: 1px; pointer-events: none; transition-property: opacity; transition-duration: 350ms; overflow: hidden; opacity: 0;">
	    <div style="position: absolute; z-index: 100; background: padding-box padding-box rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.9); box-sizing: border-box; width: 100%; border-radius: 3px; pointer-events: none; transition-property: transform; transition-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1); transform: translate(0px, 0px) translateZ(0px); height: 70px;"></div>
	   </div>
	  </div>
	  <div class="mp-menu mp-menu-half mp-menu-right" style="overflow: hidden; top: 84px; display: block;" v-show="isShow">
	    <div class="mp-menu-inner mmi-child" style="transition-property: transform; transform-origin: 0px 0px 0px; transform: translate(0px, 0px) translateZ(0px);" :class="{isChildshow:index===0}" :index="0">
	      	<div class="mp-menu-item" @click="selectChild(0);isShowclose()">
	        	全部景点
	      		<span class="mp-munu-item-num">{{list.length}}</span>
	    	</div>
	  	</div>
	    <div class="mp-menu-inner mmi-child" style="transition-property: transform; transform-origin: 0px 0px 0px; transform: translate(0px, 0px) translateZ(0px);" :class="{isChildshow:index===1}" :index="1">
	      	<div class="mp-menu-item" @click="selectChild(1);isShowclose()">
	        	树木森林
	      		<span class="mp-munu-item-num">{{ntsumsm}}</span>
	    	</div>
	      	<div class="mp-menu-item" @click="selectChild(2);isShowclose()">
	        	自然公园
	      		<span class="mp-munu-item-num">{{ntsumzr}}</span>
	    	</div>
	  	</div>
	    <div class="mp-menu-inner mmi-child" style="transition-property: transform; transform-origin: 0px 0px 0px; transform: translate(0px, 0px) translateZ(0px);" :class="{isChildshow:index===2}" :index="2">
	      	<div class="mp-menu-item" @click="selectChild(3);isShowclose()">
	        	儿童乐园
	      		<span class="mp-munu-item-num">{{amsumet}}</span>
	    	</div>
	      	<div class="mp-menu-item" @click="selectChild(4);isShowclose()">
	        	主题乐园
	      		<span class="mp-munu-item-num">{{amsumzt}}</span>
	    	</div>
	  	</div>
	    <div class="mp-menu-inner mmi-child" style="transition-property: transform; transform-origin: 0px 0px 0px; transform: translate(0px, 0px) translateZ(0px);" :class="{isChildshow:index===3}" :index="3">
	      	<div class="mp-menu-item" @click="selectChild(5);isShowclose()">
	        	农家乐
	      		<span class="mp-munu-item-num">{{fmsumnj}}</span>
	    	</div>
	  	</div>
	    <div class="mp-menu-inner mmi-child" style="transition-property: transform; transform-origin: 0px 0px 0px; transform: translate(0px, 0px) translateZ(0px);" :class="{isChildshow:index===4}" :index="4">
	      	<div class="mp-menu-item" @click="selectChild(6);isShowclose()">
	        	海洋馆
	      		<span class="mp-munu-item-num">{{ossumhy}}</span>
	    	</div>
	      	<div class="mp-menu-item" @click="selectChild(7);isShowclose()">
	        	水上乐园
	      		<span class="mp-munu-item-num">{{ossumss}}</span>
	    	</div>
	  	</div>



	   <div style="position: absolute; z-index: 100; width: 7px; bottom: 2px; top: 2px; right: 1px; pointer-events: none; transition-property: opacity; transition-duration: 350ms; overflow: hidden; opacity: 0;">
	    <div style="position: absolute; z-index: 100; background: padding-box padding-box rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.9); box-sizing: border-box; width: 100%; border-radius: 3px; pointer-events: none; transition-property: transform; transition-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1); transform: translate(0px, 0px) translateZ(0px); height: 139px;"></div>
	   </div>
	  </div>

		<div class="mp-menu-mask" style="top: 84px; display: block;"
		v-show="isShowmask"></div>
	</div>
</template>

<script>

export default {
	name: 'ClassifyHeader',
	props: {
		list: Array
	},
	data () {
		return {
			isShow: false,
			isShowsc: false,
			isShowmask: false,

			index:0,
			ntsum:0,
			amsum:0,
			fmsum:0,
			ossum:0,

			ntsumzr:0,
			ntsumsm:0,
			amsumet:0,
			amsumzt:0,
			fmsumnj:0,
			ossumhy:0,
			ossumss:0,			
		}
	},
	methods: {
		isShowmenu () {
			this.isShow = !this.isShow
			this.isShowsc = false
			this.isShowmask = this.isShow
		},
		isShowmenusc () {
			this.isShowsc = !this.isShowsc
			this.isShow = false
			this.isShowmask = this.isShowsc
		},	
		isShowclose () {
			this.isShowsc = false
			this.isShow = false
			this.isShowmask = false			
		},
		activeshow (index) {
			this.index = index
			this.isChildshow = index
		},	
		selectChild (el) {
			this.$emit('thisChild',el)
		},
		classifysum () {
			//const self = this 和== true是必须的
			//hasOwnProperty()判断有没有这个属性
			// const self = this
			// self.list.forEach(function(i){
			// 	if (i.hasOwnProperty('natural') == true) {
			// 		self.ntsum = self.ntsum + 1	
			// 		return self.ntsum							
			// 	} 
			// 	if (i.hasOwnProperty('amusement') == true) {
			// 		self.amsum = self.amsum + 1	
			// 		return self.amsum							
			// 	}
			// 	if (i.hasOwnProperty('oceanpark') == true) {
			// 		self.ossum = self.ossum + 1	
			// 		return self.ossum							
			// 	}
			// 	if (i.hasOwnProperty('formalfun') == true) {
			// 		self.fmsum = self.fmsum + 1	
			// 		return self.fmsum							
			// 	}										
			// })
			// 

			this.list.forEach(item=>{
				if(typeof item.natural !== 'undefined'){
					this.ntsum++
					if (item.natural == 'naturalzoo') {
						this.ntsumsm++
					}
					if (item.natural == 'sparkzoo') {
						this.ntsumzr++
					}					
				}
				if(typeof item.amusement !== 'undefined'){
					this.amsum++
					if (item.amusement == 'childzoo') {
						this.amsumet++
					}
					if (item.amusement == 'themezoo') {
						this.amsumzt++
					}	
				}
				if(typeof item.oceanpark !== 'undefined'){
					this.ossum++
					if (item.oceanpark == 'waterzoo') {
						this.ossumss++
					}
					if (item.oceanpark == 'oceanzoo') {
						this.ossumhy++
					}						
				}
				if(typeof item.formalfun !== 'undefined'){
					this.fmsum++
					if (item.formalfun == 'formalzoo') {
						this.fmsumnj++
					}
				}
			})					
		},


	},
	watch: {
		list (list) {
			this.classifysum()			
		}
	},
	created () {
	},
	mounted () {
		this.classifysum()
	},
	beforeRouteUpdate () {
		this.classifysum()
		next()
	},


}
</script>

<style lang='stylus' scoped>
  	@import '~__STYLES__/varibles.styl'
  	.mmi-child
  		display:none;
  	.isChildshow
  		display:block!important;
  	.mpmenuitemactive
  	    background: #f1f1f1;
	.header-back
		width: .64rem
		text-align: center
		font-size: .4rem
		color: #333
	a:hover 
    	text-decoration: none;
	
</style>